<template>
  <div class='informationWrapper'>
    <div class='header'>
      <span @click="backToDocterMainPage" class='backIcon'>{{point}}</span>
      <span>个人信息设置</span>
    </div>
    <div class="content">
      <div v-for="(item, index) in detail" :key="index">
        <div class='contentChild'>
          <span class='contentChildKey'>{{item.key}}</span> 
          <span class='contentChildValue'>
            <span v-if="item.title !== 'qualificationsPic' && item.title !== 'pic'">{{item.value}}</span>
            <span v-else>已上传</span>
            <span class='modifyInformation' @click="handleModifyIndex(index)">X</span>
          </span>
        </div>
        <div v-if="modifyIndex === index" class='modifyWrapper'>
          <input type="text" v-model="currentContent" v-if="item.title !== 'qualificationsPic' && item.title !== 'pic'" class="modifyInput">
          <span v-else @click="uploadPic(item.title)" class="modifyPicButton">上传图片</span>
          <span @click="cancelModify(index)" class="modifyButton">取消</span>
          <span @click="confirmModify(index)" v-if="item.title !== 'qualificationsPic' && item.title !== 'pic'" class="modifyButton">确定</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    modifyIndex (newVal, oldVal) {
      if (newVal > -1 && newVal === oldVal) {
        console.log(newVal)
      } 
    },
    currentContent (newVal, oldVal) {
      console.log(newVal)
    }
  },
  data() {
    return {
      point: '<',
      mainPageUrl: '../user_center/main',
      modifyIndex: -1,
      currentContent: '',
      detail: [
        {value: '刘妙春', key: '姓名', title: 'name'},
        {value: '北大深圳医院', key: '执业医院', title: 'hospital'},
        {value: '18898751880', key: '手机号码', title: 'phoneNumber'},
        {value: '神经外科', key: '所在科室', title: 'department'},
        {value: '主任医师', key: '职称', title: 'level'},
        {value: '0755-3432998', key: '办公固话', title: 'fixNumber'},
        {value: '39556265656888', key: '身份证号', title: 'card'},
        {value: true, key: '身份证照片', title: 'pic'},
        {value: true, key: '医师执业证照片', title: 'qualificationsPic'},
        {value: '颅脑肿瘤', key: '专业擅长', title: 'profession'},
        {value: '医学博士', key: '执业经历', title: 'experience'},
      ]
    }
  },
  methods: {
    backToDocterMainPage () {
      wx.navigateBack({
        delta: 1
      })
    },
    handleModifyIndex (index) {
      if (this.modifyIndex === index) {
        index = -1
        this.currentContent = ''
      }else {
        this.currentContent = this.detail[index].value
      }
      this.modifyIndex = index
    },
    uploadPic (type) {
      console.log(type)
    },
    confirmModify (index) {
      this.detail[index].value = this.currentContent
      this.modifyIndex = -1
    },
    cancelModify (index) {
      this.modifyIndex = -1
      this.currentContent = ''
    }
  }
}
</script>

<style scoped>
.informationWrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}
.header{
  height: 150rpx;
  line-height: 150rpx;
  width: 100%;
  background-color: #f3f1f4;
  padding-left: 40rpx;
  font-size: 36rpx;
  color: #000000;
}
.header .backIcon {
  display: inline-block;
  margin-right: 20rpx;
}
.content {
  position: absolute;
  box-sizing: border-box;
  padding: 0 20rpx;
  top: 150rpx;
  bottom: 0;
  width: 100%;
  color: #282828;
}
.contentChildKey {
  font-size: 32rpx;
  color: #282828;
}
.contentChild, .modifyWrapper {
  box-sizing: border-box;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid #b1b1b1;
  color: #282828;
}
.contentChildValue {
  float: right;
  color: #6c6c6c;
  font-size: 28rpx;
}
.modifyInformation {
  margin-left: 20rpx; 
  color: #6c6c6c;
  font-size: 28rpx;
}
.modifyInput {
  width: 50%;
  margin-right: 10%;
  height: 80rpx;
  line-height: 80rpx;
  display: inline-block;
  color: #6c6c6c;
  font-size: 28rpx;
}
.modifyButton {
  float:right;
  width:15%;
  height: 80rpx;
  color: #6c6c6c;
  font-size: 28rpx;
  line-height: 80rpx;
}
.modifyPicButton {
  width: 50%;
  margin-right: 10%;
  color: #6c6c6c;
  font-size: 28rpx;
  height: 80rpx;
  line-height: 80rpx;
  display: inline-block;
}
</style>  